<template>
  <div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in houseDetail.houseImage" :key="item">
        <img :src="'http://192.168.3.63:8085'+item" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 房屋信息 -->
    <homeData :showImg="false" :homeData="houseDetail"></homeData>
    <!-- 主力户型 -->
    <FormTitle title="主力户型"></FormTitle>
    <div class="cardBox">
        <div class="title">
            {{houseDetail.houseType}}
        </div>
        <img src="../../assets/image/home/showHome.jpg" alt="">
        <div class="font-12">{{houseDetail.community}}</div>
        <div class="font-12">实际面积{{houseDetail.houseArea}}</div>
    </div>
    <!-- 装修材料列表 -->
    <!-- <FormTitle title="装修材料列表"></FormTitle>
    <div class="cardBox">
        <div class="title">
            装修材料清单表
        </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import homeData from "@/components/homeData/index.vue";
import FormTitle from "@/components/formTitle/index.vue";
import { useRoute } from "vue-router";
import houseApi from "@/api/house.js";

const route = useRoute()
const houseDetail = ref({})
/**
 * 获取列表
 */
 const getDetail = async () => {
  try {
    const res = await houseApi.getHouseDetail(
      route.query.houseId
    );
    console.log(res.data.data);
    houseDetail.value = res.data.data;
    houseDetail.value.houseImage = houseDetail.value.houseImage.split(',')
  } catch (error) {
    console.log(error);
  }
};
getDetail();
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
height: 216px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>